<template>
  <!-- 搜索 -->
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="资源名称" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入资源名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="创建人" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入创建人"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input
          v-model="queryParams.author"
          placeholder="请输入作者"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="出版社" prop="publish">
        <el-input
          v-model="queryParams.publish"
          placeholder="请输入出版社"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>

      <!-- <el-form-item label="系统内置" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="请选择系统内置"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button type="primary" plain @click="deleteByIds()" v-hasPermi="['infra:config:delete']">
          <Icon icon="ep:plus" class="mr-5px" /> 批量删除
        </el-button>
        <!-- <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['infra:config:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button type="primary" plain @click="deleteByIds()" v-hasPermi="['infra:config:delete']">
          <Icon icon="ep:plus" class="mr-5px" /> 批量删除
        </el-button> -->
        <!-- <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['infra:config:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button> -->
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" />
      <!-- <el-table-column label="序号" align="center" prop="id"/> -->
      <el-table-column label="序号" align="center">
        <template #default="scope">
          <span>{{ (Number(queryParams.pageNo) - 1) * Number(queryParams.pageSize) + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资源名称" align="center" prop="title" />
      <el-table-column label="ISBN号" align="center" prop="isbn" :show-overflow-tooltip="true" />
      <el-table-column label="作者" align="center" prop="author" :show-overflow-tooltip="true" />
      <el-table-column label="出版社" align="center" prop="publish" />
      <el-table-column
        label="出版时间"
        align="center"
        prop="publishTime"
        width="180"
        :formatter="dateFormatter"
      />
      <el-table-column label="分类" align="center" prop="subcategory" />
      <el-table-column
        label="采集时间"
        align="center"
        prop="createTime"
        width="180"
        :formatter="dateFormatter"
      />
      <el-table-column label="资源类型" align="center" prop="dataType" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('look', scope.row.id)"
            v-hasPermi="['infra:config:update']"
          >
            查看
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['infra:config:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="100px"

    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入标题" :disabled="lookData" />
      </el-form-item>
      <el-form-item label="所有题名" prop="allTitle">
        <el-input v-model="formData.allTitle" placeholder="请输入所有题名"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="丛编题名" prop="seriesTitles">
        <el-input v-model="formData.seriesTitles" placeholder="请输入丛编题名"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="formData.author" placeholder="请输入作者"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="作者简介" prop="authorIntro">
        <el-input v-model="formData.authorIntro" placeholder="请输入作者简介" type="textarea" :disabled="lookData" />
      </el-form-item>
      <el-form-item label="主编" prop="editor">
        <el-input v-model="formData.editor" placeholder="请输入主编"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="出版社" prop="publish">
        <el-input v-model="formData.publish" placeholder="请输入出版社"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="出版时间" prop="publishTime">
        <!-- <el-input v-model="formData.publishTime" placeholder="请输入出版时间" /> -->
        <el-date-picker
          v-model="formData.publishTime"
          type="date"
          placeholder="请输入出版时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :disabled="lookData" />
      </el-form-item>
      <el-form-item label="出版发行地" prop="publishPlace" >
        <el-input v-model="formData.publishPlace" placeholder="请输入出版发行地" :disabled="lookData" />
      </el-form-item>
      <el-form-item label="目录" prop="catalogue" >
        <el-input v-model="formData.catalogue" placeholder="请输入目录" type="textarea" :disabled="lookData" />
      </el-form-item>
      <el-form-item label="前言序言" prop="preface">
        <el-input v-model="formData.preface" placeholder="请输入前言序言" type="textarea" :disabled="lookData" />
      </el-form-item>
      <el-form-item label="内容简介" prop="contentIntro"  >
        <el-input v-model="formData.contentIntro" placeholder="请输入内容简介" type="textarea"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="摘要" prop="abstracts"  >
        <el-input v-model="formData.abstracts" placeholder="请输入摘要" type="textarea" :disabled="lookData" />
      </el-form-item>
      <el-form-item label="ISBN号" prop="isbn"  >
        <el-input v-model="formData.isbn" placeholder="请输入ISBN号"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="语种" prop="language"  >
        <el-input v-model="formData.language" placeholder="请输入语种"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="关键词" prop="keyword"  >
        <el-input v-model="formData.keyword" placeholder="请输入关键词"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="文献类型" prop="documentType"  >
        <el-input v-model="formData.documentType" placeholder="请输入文献类型"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="分类" prop="subcategory"  >
        <el-input v-model="formData.subcategory" placeholder="请输入所属分类"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="产品特色" prop="productFeatures"  >
        <el-input v-model="formData.productFeatures" placeholder="请输入产品特色"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="价格" prop="price"  >
        <el-input-number v-model="formData.price" placeholder="1.00"  :precision="2" :step="0.1"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="评价数" prop="evaluationNumber"  >
        <el-input-number v-model="formData.evaluationNumber" :min="0" placeholder="0"   :disabled="lookData" />
      </el-form-item>

      <el-form-item label="购买人数" prop="peopleBuy"  >
        <el-input-number v-model="formData.peopleBuy" :min="0" placeholder="0"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="在售商家数" prop="sellersNumber"  >
        <el-input-number v-model="formData.sellersNumber" :min="0" placeholder="0"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="包装" prop="packages"  >
        <el-input v-model="formData.packages" placeholder="请输入包装"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="品牌" prop="brand"  >
        <el-input v-model="formData.brand" placeholder="请输入品牌"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="商品编码" prop="productCode"  >
        <el-input v-model="formData.productCode" placeholder="请输入商品编码"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="是否套装" prop="isSet">
        <el-radio-group v-model="formData.isSet">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开本" prop="format"  >
        <el-input v-model="formData.format" placeholder="请输入开本"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="纸张" prop="paper"  >
        <el-input v-model="formData.paper" placeholder="请输入纸张"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="馆藏信息" prop="collectionInformation"  >
        <el-input v-model="formData.collectionInformation" placeholder="请输入馆藏信息" type="textarea"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="编辑推荐" prop="evaluationNumber"  >
        <el-input v-model="formData.evaluationNumber" placeholder="请输入编辑推荐" type="textarea"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="页数" prop="pages"  >
        <el-input-number v-model="formData.pages" :min="0" placeholder="0"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="字数" prop="words"  >
        <el-input-number v-model="formData.words" :min="0" placeholder="0"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="版次" prop="edition"  >
        <el-input v-model="formData.edition" placeholder="请输入版次"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="版本说明" prop="version"  >
        <el-input v-model="formData.version" placeholder="请输入版本说明" type="textarea"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="附加版本说明" prop="additionalVersion"  >
        <el-input v-model="formData.additionalVersion" placeholder="请输入附加版本说明" type="textarea"  :disabled="lookData" />
      </el-form-item>
      <el-form-item label="内页插图" prop="illustrationUrl"  >
        <el-input v-model="formData.illustrationUrl" placeholder="请输入内页插图"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="商品图" prop="imageUrl"  >
        <el-input v-model="formData.imageUrl" placeholder="请输入商品图"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="页面网址" prop="pageUrl"  >
        <el-input v-model="formData.pageUrl" placeholder="请输入页面网址"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="来源数据库" prop="dataSource"  >
        <el-input v-model="formData.dataSource" placeholder="请输入来源数据库"   :disabled="lookData" />
      </el-form-item>
      <el-form-item label="资源类型" prop="dataType"  >
        <el-input v-model="formData.dataType" placeholder="请输入数据类型"   :disabled="lookData" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button v-if="submitType==='create' || submitType==='update'" :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>

</template>
<script lang="ts" setup>
import { DICT_TYPE, getBoolDictOptions,getStrDictOptions } from '@/utils/dict'
import download from '@/utils/download'
import * as ResourcesApi from '@/api/infra/resource/resources'

defineOptions({ name: 'Resources' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  title: undefined,
  author: undefined,
  publish: undefined,
  createBy: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const multipleSelection = ref<ResourcesApi.ResourcesBaseVO[]>([])
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改； look--查看
const formData = ref({})
const formRules = ref({})

const formRef = ref() // 表单 Ref
// 时间
const size = ref<'default' | 'large' | 'small'>('default')
// 查看
const lookData = ref(false)

//确认按钮是否显示
const submitType=ref("")

/** 打开弹窗 */
const openForm = async (type: string, id?: number) => {
  submitType.value=type
  if(type === 'look'){
    lookData.value = true
  }else {
    lookData.value = false
  }

  const fildsList=getStrDictOptions(DICT_TYPE.RESOURCE_MUST_INPUT_FILDS)
  // debugger
  for (const key in fildsList) {
    let rule="blur"
    let trigger=(fildsList[key]['value']).split (":")[0]
    let message=(fildsList[key]['value']).split (":")[1]
    formRules.value[fildsList[key]['label']] = [{ required: true, message: `${message}`, trigger: rule }]
  }
  console.log(formRules.value)


  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ResourcesApi.getResources(id)
    } finally {
      formLoading.value = false
    }
  }
}

defineExpose({ openForm }) // 提供 open 方法，用于打开弹窗



/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as ResourcesApi.ResourcesBaseVO
    if (formType.value === 'create') {
      await ResourcesApi.createResources(data)
      message.success(t('common.createSuccess'))
      // 发送操作成功的事件
      emit('success')
    } else if(formType.value === 'updaue'){
      await ResourcesApi.updateResources(data)
      message.success(t('common.updateSuccess'))
      // 发送操作成功的事件
      emit('success')
    }
    dialogVisible.value = false
  } finally {
    formLoading.value = false
    getList()
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
  }
  formRef.value?.resetFields()
}





/**选中的复选框集合 */
const handleSelectionChange = (val: ResourcesApi.ResourcesBaseVO[]) => {
  multipleSelection.value = val
}


/**批量删除 */
const deleteByIds = async () => {
  if (multipleSelection.value.length == 0) {
    message.warning('请选择要删除的选项')
  } else {
    try {
      const ids = multipleSelection.value.map((multiple) => multiple.id)
      //确认删除
      await message.delConfirm()

      await ResourcesApi.deleteResourcesList(ids)
      message.success(t('common.delSuccess'))
      // 刷新列表
      await getList()
    } catch {}
  }
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ResourcesApi.getResourcesPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ResourcesApi.deleteResources(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await ResourcesApi.exportResourcesExcel(queryParams)
    download.excel(data, '数据导出.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
